<template>
  <div
    class="mainsec-container"
    :style="{
      background: `url(${img}) no-repeat center/cover`,
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
    }"
  >
    <div class="main-title">PDM产品管理系统</div>
    <div class="content">
      针对安全应急制造企业打造的一款企业级一站式产品研发数据协同管理与全方位数字化产品全生命周期管理平台，通过图文档管理、产品结构管理、产品配置管理、物料管理、编码管理、变更管理、流程管理、工艺管理、项目管理等系统功能，支持从概念创意、设计、工艺、样机制作、生产制造、销售、维护到报废的产品全生命周期各个阶段的数据创建、协同、应用和管理，迅速提升企业在知识沉淀、技术规范、产品设计、项目管控、业务优化及高效协同办公的管理水平，全面提升企业整体研发管理水平，最大限度的缩短产品研发周期、降低成本、提高质量。
    </div>
    <el-button @click="clickHandler" type="primary" size="big" class="button"
      >立即体验</el-button
    >
  </div>
</template>

<script>
import img from "@/assets/data/exports/banner2@3x.png";
export default {
  components: {},
  props: {
    p: {
      default: 6,
    },
  },
  data() {
    return {
      img,
    };
  },
  methods: {
    clickHandler() {
      location = "https://pdm.csin.net.cn/#/login";
    },
  },
};
</script>

<style lang="scss" scoped>
.mainsec-container {
  $background-height: 440px;
  width: 100%;
  height: $background-height;
  padding: 40px;
  position: relative;
  margin-bottom: 30px;
  .main-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .content {
    width: 62%;
    height: 220px;
    font-size: 17px;
    color: #555555;
    line-height: 36px;
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
  }

  .button {
    font-size: 16px;
    width: 8em;
    height: 50px;
  }
}
</style>
